<template>
    <el-input placeholder="搜索菜单" v-model="searchText" clearable class="menu-search" />
    <el-menu :default-active="activeMenu" router @select="handleSelect">
        <el-menu-item 
            v-for="item in filteredMenu" 
            :key="item.index" 
            :index="item.index"
        >
            <span>{{ item.label }}</span>
        </el-menu-item>
    </el-menu>
</template>

<script setup>
import { ref, watch, computed } from "vue";
import { useRoute } from 'vue-router'

const route = useRoute()
const activeMenu = ref("/");
const searchText = ref("");

// 定义菜单数据
const menuItems = ref([
    { index: '/', label: '首页' },
    { index: '/snake', label: '贪吃蛇游戏' },
    { index: '/chat', label: '本地大语言模型对话' }
]);

// 计算属性实现过滤
const filteredMenu = computed(() => {
    return menuItems.value.filter(item => 
        item.label.toLowerCase().includes(searchText.value.toLowerCase())
    );
});

watch(() => route.path, (val) => {
    activeMenu.value = val;
}, {
    immediate: true,
    deep: true
})

const handleSelect = (index) => {
    activeMenu.value = index;
};
</script>

<style lang="scss" scoped>
.el-menu {
    border-right: 0;
}
</style>